<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="@{/}" target="_self" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>后台管理 | 登录</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- Font Awesome -->
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- Ionicons -->
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" />
<!-- Theme style -->
<link rel="stylesheet" href="css/admin.min.css" />
<link rel="stylesheet" href="css/skins/skin-black.min.css" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
	<div class="wrapper">
		<div
			style="margin: 100px auto 0 auto; min-height: 600px; max-width: 600px;">
			<section class="content">
				<div class="row">
					<div class="col-md-12">

						<div class="logo text-center"
							style="margin: 100px auto 50px auto;">
							<h1 class="">管理后台登录</h1>
						</div>

						<div class="box box-info"
							style="border: 1px solid #d2d6de; border-top: 3px solid #00c0ef;">
							<div class="box-header with-border">
								<h2 class="box-title" style="font-weight: bold;">用户登录</h2>
							</div>
							<!-- /.box-header -->
							<!-- form start -->
							<form role="form" action="/login" method="post" id="main-form"
								class="form-horizontal">
								<input type="hidden" th:name="${_csrf.parameterName}"
									th:value="${_csrf.token}" />
								<div class="box-body">
									<div class="form-group">
										<label for="inputUserName" class="col-sm-2 control-label">用户名</label>
										<div class="col-sm-9">
											<input type="text" name="username" class="form-control"
												id="inputUserName" placeholder="请输入用户名" required="required" />
										</div>
									</div>
									<div class="form-group">
										<label for="inputPassword" class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>

										<div class="col-sm-9">
											<input type="password" name="password" class="form-control"
												id="inputPassword" placeholder="请输入密码" required="required" />
										</div>
									</div>
								</div>
								<!-- /.box-body -->
								<div class="box-footer">
									<div class="col-sm-offset-3 col-sm-9">
										<button type="submit" class="btn btn-info pull-right ">登录</button>
									</div>
								</div>
								<!-- /.box-footer -->
							</form>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>

	<!-- jQuery 2.2.3 -->
	<script src="js/jQuery/jquery-2.2.3.min.js"></script>
	<!-- Bootstrap 3.3.6 -->
	<script src="js/bootstrap.min.js"></script>
	<!-- AdminLTE App -->
	<script src="js/app.min.js"></script>

	<div layout:fragment="js">
		<script th:if="${hasError}">
			$(document).ready(function() {
				alert("用户名或密码错误");
			});
		</script>
		<script th:if="${logout}">
			$(document).ready(function() {
				alert("您已经退出登录");
			});
		</script>
		<script>
			$(document).ready(function() {
				var formSelector = '#main-form';

				var uname = $(input = '[name="username"]').val();
				var pwd = $(input = '[name="password"]').val();

				$(formSelector).on('submit', function(e) {
					if (uname == null || pwd == null)
						alert("请填写用户名和密码");
				});
			});
		</script>
	</div>

</body>
</html>